﻿<template>
    <div class="l-rblock l-form-viewer" style="padding:16px;">
        <el-form
            :model="formData"
            :rules="rules"
            size="mini"
            labelPosition="right"
            labelWidth="80px"
            ref="form"
            >
            <div class="l-auto-window only-tabs">
                <el-tabs v-model="activeName" type="card">
                    <el-tab-pane class="l-tabs-container" :label="$t('主表信息')" name="tab0">
                        <el-row :gutter="0">
                            <div class="l-rblock">
                                <el-col :span="24" >
                                    <el-form-item 
                                        label="收件人" 
                                        prop="f_AddresssHtml"
                                        > 
                                        <l-user-select 
                                            v-model="formData.f_AddresssHtml"
                                            multiple
                                         ></l-user-select>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="24" >
                                    <el-form-item 
                                        label="抄送人" 
                                        prop="f_CopysendHtml"
                                        > 
                                        <l-user-select
                                            v-model="formData.f_CopysendHtml"
                                            multiple
                                         ></l-user-select>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="24" >
                                    <el-form-item 
                                        label="密送人" 
                                        prop="f_BccsendHtml"
                                        > 
                                        <l-user-select 
                                            v-model="formData.f_BccsendHtml"
                                            multiple
                                         ></l-user-select>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="24" >
                                    <el-form-item 
                                        label="主题" 
                                        prop="f_Theme"
                                        > 
                                        <el-input :readonly="false" v-model="formData.f_Theme" :placeholder="$t('请输入')" >
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6" >
                                    <el-form-item 
                                        label="附件" 
                                        prop="f_Files"
                                        > 
                                        <l-upload v-model="formData.f_Files" ></l-upload>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24" >
                                    <el-form-item 
                                        label="邮件内容" 
                                        prop="f_EmailContent"
                                        > 
                                        <l-editor v-model="formData.f_EmailContent" :options="{ theme:'snow',placeholder: $t('请输入内容...')}"  style="height:200px;"></l-editor>
                                    </el-form-item>
                                </el-col>
                            </div>
                        </el-row>
                    </el-tab-pane>

                </el-tabs>
            </div>
        </el-form>
    </div>
</template>
<script>
export default {
    data(){
        return {
            activeName: 'tab0',
            formData: {
                f_Id:"", // 唯一标识
                f_CategoryId:"", // 邮件分类表外键
                f_AddresssHtml:"", // 收件人
                f_CopysendHtml:"", // 抄送人
                f_BccsendHtml:"", // 密送人
                f_Theme:"", // 主题
                f_Files:"", // 附件
                f_EmailContent:"", // 邮件内容
            },
            rules: {
                f_Theme:[
                    {required: true,message: '请输入主题' },
                ],
                f_AddresssHtml:[
                    { required: true, message: '请输入收件人' },
                ],
            }
        };
    },
    computed: {
    
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
        },
        
        // 重置表单
        resetForm() {
            this.$refs.form.resetFields()        
        },
        // 校验表单
        validateForm() {
            return new Promise((resolve) => {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        resolve(true)
                    }
                    else {
                        resolve(false)
                    }
                })
            })
        },
        // 设置表单数据
        setForm(data) {
            this.formData = data 
        },
        // 获取表单数据
        getForm() {
            const formData = this.$deepClone(this.formData)
          
            const postData = {
                content:formData,
                addresssIds:formData.f_AddresssHtml.split(','),
                copysendIds:formData.f_CopysendHtml.split(','),
                bccsendIds:formData.f_BccsendHtml.split(',')
            }
            return postData
        }
    }
}
</script>